<template>
    <div>
        {{ from }}
        <h2>房型信息修改</h2>
        <table class="table">
            <tr>
                <td>房型名称</td>
                <td>
                    <input type="text" v-model="from.rname" >
                </td>
            </tr>
            <tr>
                <td>房型价格</td>
                <td>
                    <input type="text" v-model="from.rprice" >
                </td>
            </tr>
            <tr>
                <td>房型面积</td>
                <td>
                    <input type="text" v-model="from.rmj" >
                </td>
            </tr>
            <tr>
                <td>可住人数</td>
                <td>
                    <input type="text" v-model="from.rnus" >
                </td>
            </tr>
            <tr>
                <td>房型图</td>
                <td>
                    <img :src="from.rimg" style="width: 120px;height: 120px;">
                    <input type="file" @change="upload">
                </td>
            </tr>
            <tr>
                <td>介绍</td>
                <td>
                    <input type="text" v-model="from.rmore" >
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="添加" @click="add">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">  
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import "bootstrap/dist/css/bootstrap-grid.css"
import "bootstrap/dist/css/bootstrap.min.css";
import { useRouter,useRoute } from "vue-router" 
const route = useRoute();
const router = useRouter();

const fantian = () => {
    axios.get("https://localhost:7270/api/RoomType/GetRoomType?rid=" + route.query.rid).then(res => {
        from.rid = res.data.rid;
        from.rname = res.data.rname;
        from.rprice = res.data.rprice;
        from.rmj = res.data.rmj;
        from.rnus = res.data.rnus;
        from.rimg = res.data.rimg;
        from.rmore = res.data.rmore;
    })
}

onMounted(() => {
    fantian()
})


const from = reactive({
    rid:0,
    rname: "",
    rprice: "",
    rmj: "",
    rnus: "",
    rimg: "",
    rmore: "",
    rsdata: "上架",
    risdel:false
})

const upload = (e:any) => {
    let file = e.target.files[0]
    let formData = new FormData();
    formData.append("file", file)

    axios.post("https://localhost:7270/api/RoomType/getFile", formData).then(res => {
        from.rimg = res.data;
    })
}

const add = () => {
    axios.put("https://localhost:7270/api/RoomType/UpRoomtype", from).then(res => {
        if (res.data > 0)
        {
        alert("修改成功!")
        router.push("/show")
        }
        else
        {
            alert("修改失败")
        }
    })
}

</script>

<style scoped></style>